<template>
	<view>
		<view class="wrap">
			<view class="address-box row" @click="toMyAddress(userId)">
				<image src="../../static/img/dw.png" mode="" class="dw"></image>
				<view class="info" v-if="myAddress == null || myAddress == undefined">
					请选择收货地址
				</view>
				<view class="info" v-else>
					<view class="">
						<text class="name">{{myAddress.name}}</text>
						<text class="tel">{{myAddress.mobile}}</text>
					</view>
					<view class="address">
						{{myAddress.address}}
					</view>
				</view>
				<image src="../../static/img/more.png" mode="" class="right-arrow"></image>
			</view>
			<view class="info-box">
				<view class="good-item row" v-for="(item,index) in list" :key="index">
					<view class="left row">
						<image :src="item.imgUrl" mode="aspectFill" class="goods-img"></image>
						<view class="content">
							<view class="title">
								{{item.name}}
							</view>
							<view class="color" v-for="(it,idx) in item.indexList" :key="idx">
								{{it.name}}：{{it.valueName}}
							</view>
							<!-- <view class="size">
								尺寸：3*6*2.75
							</view> -->
						</view>
					</view>
					<view class="right" v-if="type == 'rent'">
						<view class="day-rent">
							租赁:<text>￥</text>{{item.rentPrice}}/天
						</view>
						<view class="amount">
							x{{item.num}}
						</view>
					</view>
					<view class="right" v-if="type == 'buy'">
						<view class="day-rent">
							出售金额:<text>￥</text>{{item.price}}
						</view>
						<view class="amount">
							x{{item.num}}
						</view>
					</view>
				</view>
				<view class="rent-box" v-if="type == 'rent'">
					<view class="info-bar row">
						<text class="title">订单类型</text>
						<text>租赁订单 </text>
					</view>
					<view class="info-bar row">
						<text class="title">租赁时长</text>
						<view class="input-box row">
							<input :value="day" type="number"  @input="importDay" @blur="importDay2" placeholder="请输入租赁时长" />
							<text>(月/天)</text>
						</view>
					</view>
					<view class="info-bar row">
						<text class="title">备注</text>
						<text>最低租赁日期为4个月即120天，默认 4个月</text>
					</view>
					<view class="info-bar row">
						<text class="title">押金 </text>
						<text>￥{{depositPrice}}</text>
					</view>
					<view class="info-bar row">
						<text class="title">运费</text>
						<text>￥{{expressFee}}</text>
					</view>
					<view class="money-bar row">
						<text class="tip">共{{num}}件</text>
						<text class="intro">总金额：</text>
						<text class="money">￥{{total}}</text>
					</view>
				</view>
				<view class="buy-box" v-if="type == 'buy'">
					<view class="info-bar row">
						<text class="title">订单类型</text>
						<text>购买订单</text>
					</view>
					<view class="info-bar row">
						<text class="title">运费</text>
						<text>￥{{expressFee}}</text>
					</view>
					<view class="money-bar row">
						<text class="tip">共{{num}}件</text>
						<text class="intro">总金额：</text>
						<text class="money">￥{{total}}</text>
					</view>
				</view>
			</view>
			<view class="request-box">
				<view class="title">
					下单要求
				</view>
				<view class="tip">
					路面要求：{{list[0].siteName}}
				</view>
				<view class="tip">
					场地要求：{{list[0].roadName}}
				</view>
				<view class="tip">
					注意：如发现场地信息不符合要求，不退还运费
				</view>
				<view class="choose-bar row">
					<image src="../../static/img/radio2.png" mode="" v-if="flag" @click="choose()"></image>
					<image src="../../static/img/radio1.png" mode="" v-else @click="choose()"></image>

					<text>同意该下单要求</text>
				</view>
			</view>
		</view>
		<view class="footer center">
			<view class="btn" @click="toSubmit">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
	import comm from '../../static/data/commFunc.js'
	import cfg from '../../static/data/config.js'
	var r = cfg.router;
	export default {
		data() {
			return {
				type: "",
				myAddress:null,
				obj:{},
				list: [],
				day: 120,
				flag: false,
				userId: "",
				orderId:"",
				num:0,
				total:0,
				depositPrice:0,
				expressFee:0,
			};
		},
		onLoad(e) {
			console.log(e)
			this.type = e.type
			let obj = JSON.parse(e.obj)		
			console.log("obj",obj)
			this.list.push(obj)
			let total=this.total
			let num = this.num
			let depositPrice = this.depositPrice
			let expressFee = this.expressFee
				if(obj.goods){
					obj.goods.name = obj.goods.name + obj.goods.goodsName
				this.list.push(obj.goods)
			}
			console.log("list===========",this.list)
			if(e.type =='rent'){
				this.list.forEach(e=>{
					num +=parseInt(e.num)
					console.log(num,"======num")
					total +=  parseInt(e.num)* parseFloat(e.rentPrice)*this.day+parseInt(e.num)*parseFloat(e.depositPrice)+parseInt(e.num)*parseFloat(e.expressFee)
					console.log(total,"======total")
					depositPrice+=parseFloat(e.depositPrice)
					console.log(depositPrice,"======depositPrice")
					expressFee += parseFloat(e.expressFee)
					console.log(expressFee,"======expressFee")
				})
			}else if(e.type == 'buy'){
				this.list.forEach(e=>{
					num +=parseInt(e.num)
					console.log(num,"======num")
					total +=  parseInt(e.num)* parseFloat(e.price)+parseInt(e.num)*parseFloat(e.expressFee)
					console.log(total,"======total")
					expressFee += parseFloat(e.expressFee)
					console.log(expressFee,"======expressFee")
				})
			}		
			 this.num = num
			 this.total = total
			 this.depositPrice = depositPrice
			 this.expressFee = expressFee
		},
		onShow(){
			this.getMyAddress()
		},
		methods: {
			importDay(e) {
				console.log(e)
				this.day = e.detail.value
				// if(parseInt(e.detail.value) <120){
				// 	comm.showToast("租赁时长不能少于4个月（120天）","none")
				// 	this.day = 120
				// 	e.detail.value = 120
				// }			
				this.list.forEach(e=>{
					this.total =  parseInt(e.num)* parseFloat(e.rentPrice)*this.day+parseFloat(e.depositPrice)+parseFloat(e.expressFee)
				})
			},
			importDay2(e){
				this.day = e.detail.value
				if(parseInt(e.detail.value) <120){
					comm.showToast("租赁时长不能少于4个月（120天）","none")
					this.day = 120
					e.detail.value = 120
				}
				this.list.forEach(e=>{
					this.total =  parseInt(e.num)* parseFloat(e.rentPrice)*this.day+parseFloat(e.depositPrice)+parseFloat(e.expressFee)
				})
			},
			choose() {
				this.flag = !this.flag
			},
			getMyAddress(){
				let data = {}
				comm.request("POST", "/app/memberAddress/list", data, (res, data) => {
					console.log("我的地址", res)
					if (res.data.ret_code == 200) {
						this.myAddress = data[0]
					} else {
						comm.showToast(res.data.ret_msg, "none")
					}
				})
			},
			toMyAddress(e) {
				comm.navigateTo(r.myAddress)
			},
			//提交订单
			toSubmit() {
				if(this.myAddress == null){
					comm.showToast("请选择收货地址","none")
					return
				}else if(!this.flag){
					comm.showToast("请勾选同意下单要求","none")
					return
				}
				if(this.type == 'rent'){
					let data = {
						orderType:2,
						day:this.day,
						skuId:this.list[0].skuId,
						quantity:this.list[0].num,
						sumMoney:this.total,
						addressId:this.myAddress.id,
						matchGoodsId:this.list[1] ? [{id:this.list[1].id,quantity:this.list[1].num}] :[]
					}
					comm.request("POST", "/app/order/buyGoods", data, (res, data) => {
						console.log("租赁下单", res)
						if (res.data.ret_code == 200) {
							comm.showToast("提交成功")
							comm.redirectTo(r.rentOrderDetail + "?orderSn=" + data.orderSn)
						} else {
							comm.showToast(res.data.ret_msg, "none")
						}
					})
					// comm.navigateTo(r.rentOrderDetail + "?orderId=" + orderId)
				}else if(this.type == 'buy'){
					let data = {
						orderType:1,
						skuId:this.list[0].skuId,
						quantity:this.list[0].num,
						sumMoney:this.total,
						addressId:this.myAddress.id,
						matchGoodsId:this.list[1] ? [{id:this.list[1].id,quantity:this.list[1].num}] :[]
					}
					comm.request("POST", "/app/order/buyGoods", data, (res, data) => {
						console.log("购买下单", res)
						if (res.data.ret_code == 200) {
							comm.showToast("提交成功")
							comm.redirectTo(r.orderDetail + "?orderSn=" + data.orderSn)
						} else {
							comm.showToast(res.data.ret_msg, "none")
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F9F9F8;
	}

	.wrap {
		padding: 30rpx;
		padding-bottom: 120rpx;

		.address-box {
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;
			padding: 30rpx;
			justify-content: space-between;

			.dw {
				width: 64rpx;
				height: 64rpx;
				margin-right: 30rpx;
			}

			.info {
				flex: 1;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: rgba(25, 17, 11, 1);
					margin-right: 30rpx;
				}

				.tel,
				.address {
					font-size: 24rpx;
					color: rgba(153, 153, 153, 1);
					word-break: break-word;
				}

				.address {
					margin-top: 10rpx;
				}
			}

			.right-arrow {
				width: 12rpx;
				height: 21rpx;
				margin-left: 20rpx;
			}
		}

		.info-box {
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;
			padding: 30rpx;
			margin: 30rpx 0;

			.good-item {
				margin-bottom: 30rpx;
				justify-content: space-between;
				align-items: flex-start;

				.left {
					flex: 1;
					align-items: flex-start;

					.goods-img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
						background: #F9F9F8;
						margin-right: 30rpx;
					}

					.content {
						flex: 1;

						.title {
							font-size: 24rpx;
							color: rgba(51, 51, 51, 1);
						}

						.color,
						.size {
							font-size: 20rpx;
							color: rgba(153, 153, 153, 1);
							margin-top: 10rpx;
						}
					}
				}

				.right {
					text-align: right;

					.day-rent {
						font-size: 24rpx;
						color: rgba(51, 51, 51, 1);

						text {
							font-size: 26rpx;
						}
					}

					.amount {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}

			.info-bar {
				justify-content: space-between;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 1);
				margin: 10rpx 0;

				.title {
					width: 130rpx;
				}

				.input-box {
					flex: 1;
					justify-content: space-between;

					input {
						flex: 1;
					}
				}
			}

			.money-bar {
				justify-content: flex-end;
				font-size: 26rpx;
				margin-top: 10rpx;

				.tip {
					color: rgba(153, 153, 153, 1);
				}
			}

			.intro {
				color: #333333;
			}

			.money {
				color: #D93011;
			}
		}

		.request-box {
			background: rgba(255, 255, 255, 1);
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.title {
				color: #333333;
				font-size: 24rpx;
				margin-bottom: 30rpx;
			}

			.tip {
				color: #999999;
				font-size: 22rpx;
				margin-bottom: 5rpx;
			}

			.choose-bar {
				margin-top: 20rpx;

				image {
					margin-right: 20rpx;
					width: 35rpx;
					height: 35rpx;
				}

				text {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.footer {
		width: 100%;
		box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		padding: 22rpx 0;
		position: fixed;
		background: #FFFFFF;
		bottom: 0;
		z-index: 99;

		.btn {
			width: 345rpx;
			height: 79rpx;
			line-height: 79rpx;
			text-align: center;
			background: rgba(217, 48, 17, 1);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>
